<template>
    <div class="colorFFF font_OPPOSans boxBody">
        <Tabs title="商城流水总数">
            <template #btn>
                <div style="width: 10rem"></div>
            </template>
        </Tabs>
        <div class="content-body flex-box flex-direction-column">
            <div class="flex items-end justify-center" style="padding-top: 1.5rem;padding-bottom: 1.5rem">
                <BigDigits :value="(loader.data?.sumMoney.toFixed(2) ?? '0.00').padStart(12, '0')"></BigDigits>
                <span style="margin-left: 0.75rem">元</span>
            </div>
            <div>
                <div class="content-body-top">
                    <div class="content-body-border">
                        <div class="text-center">
                            <p class="topText1 font-size14">商户注册数(家)</p>
                            <p class="topText2">{{loader.data?.merchantRegistNum ?? '-'}}</p>
                        </div>
                    </div>
                    <div class="content-body-border">
                        <div class="text-center" style="display: flex;flex-direction:column;align-items:center">
                            <p class="topText1 font-size14">商城成交量(次)</p>
                            <p class="topText2">{{ loader.data?.volume ?? '-' }}</p>
                        </div>
                    </div>
                    <div class="content-body-border">
                        <div class="text-center">
                            <p class="topText1 font-size14">商品总数(件)</p>
                            <p class="topText2">{{ loader.data?.productCount ?? '-' }}</p>
                        </div>
                    </div>
                </div>

                <div class="flex-box flex-center">
                    <div class="flex-box flex-direction-column" style="margin-right:9.5rem">
                        <div class="topText text-center">
                            <p class="topText1 font-size14">商城总访问量(次)</p>
                            <p class="topText2 fontWeightBold">{{ loader.data?.pvCount ?? '-' }}</p>
                        </div>
                        <svg-icon class="sizeWidth" style="margin-left: 0.1rem" icon-class="center_visit_svg" />
                    </div>
                    <div class="flex-box flex-direction-column">
                        <div class="topText text-center">
                            <p class="topText1 font-size14">分成收益(万元)</p>
                            <p class="topText2">{{ loader.data?.dividedMoney ?? '-' }}</p>
                        </div>
                        <svg-icon class="sizeWidth" icon-class="center_profit_svg" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Tabs from "./Tabs.vue"
import BigDigits from "./BigDigits/index.vue"
import { ComputedRef, inject, reactive } from 'vue'
import { Loader } from '../../shared/ApiTools';
import { useAutoLoader } from '../../shared/useAutoLoader';

const villageId = inject<ComputedRef<string>>('villageId')
const loader = reactive(new Loader<{
    "dividedMoney": number,
    "merchantRegistNum": number,
    "productCount": number,
    "pvCount": number,
    "sumMoney": number,
    "volume": number
}>('/mall/statistics/screenStatistical', 'POST', () => ({ villageId: villageId!.value })))

useAutoLoader(() => {
    if (!villageId?.value) return
    loader.load()
}, 20 * 1000)
</script>

<style scoped>
.boxBody {
    height: 100%;
}

.content-body {
    height: calc(100% - 2.5rem);
}

.topText {
    margin-bottom: -2.2rem;
}

.topText1 {
    color: rgba(251, 229, 187, 0.8);
    line-height: 1.125rem;
    margin-bottom: 0.25rem;
}

.topText2 {
    color: #FBE5BB;
    font-size: 1.5rem;
    line-height: 1.25rem;
    font-weight: bold;
    text-shadow: 0 0 0.375rem rgba(251, 229, 187, 0.4);
}

.sizeWidth {
    font-size: 6.375rem;
}

.topTextWidth {
    width: 9.75rem;
    margin-top: 0.4rem;
}

.font-size14 {
    font-size: 0.857rem;
}

.backBox {
    height: 4.8125rem;
    background: url("../assets/center_Shopping_Mall.png") left top/100% 100% no-repeat;
}

.lineTop {
    height: 4.8125rem;
    background: url('../assets/center_Shopping_line_2.png') left bottom/100% 100% no-repeat
}

.content-body-top {
    display: flex;
    justify-content: space-between;
    height: 4.8125rem;
    background: url('../assets/center_Shopping_line_2.png') left bottom/100% 100% no-repeat
}

.content-body-border {
    background: url('../assets/background_box1.png') left top/100% 100% no-repeat;
    width: 9.75rem;
    height: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.dddd {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>